<%--
  Created by IntelliJ IDEA.
  User: sqluogui
  Date: 2016/10/13
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
    <title>login</title>
    <%@ include file="/WEB-INF/view/core.jsp"%>
    <style type="text/css">
      body{background-color:#eee;}
      .span-img{width:150px;}
      .span-img img{cursor:pointer;}
      .hide{display: none;}
      .container{width:600px;color:#fff;position:relative;top:-330px;margin:auto; }
      h2{text-align: center;margin-bottom: 30px;}
      .bg{height:330px;width:600px;margin:auto;background-color:#000;border-radius: 15px;margin-top:100px;
        filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
        -moz-opacity:0.5; /*Firefox私有，透明度50%*/
        opacity:0.5;/*其他，透明度50%*/
        box-shadow:-10px 0 10px #666, /*左边阴影*/
        10px 0 10px #666, /*右边阴影*/
        0 -10px 10px #666, /*顶部阴影*/
        0 10px 10px #666; /*底边阴影*/
      }
    </style>
</head>
<body>
  <div class="bg"></div>
  <div class="container">
    <h2 class="title">用户登录！</h2>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><i class="icon-user"></i></div>
        <input type="text" name="user_name" id="user_name" class="form-control" placeholder="用户名"/>
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><i class="icon-key"></i></div>
        <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码"/>
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon"><i class="icon-picture"></i></span>
        <input type="text" name="code" id="code" class="form-control" placeholder="验证码"/>
        <span class="input-group-addon span-img"><img src="/code" onclick="changeCode(this)"/></span>
      </div>
    </div>
    <div class="form-group">
      <button class="btn btn-primary form-control" onclick="doLogin()">登&nbsp;录</button>
    </div>
    <div class="alert alert-danger hide">
      <strong>错误！</strong><span></span>
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
  function changeCode(obj){
    var radom = (Math.random() * 1000).toString();
    radom = radom.substr(0, radom.indexOf("."));
    $(obj).attr("src","/code/?radom="+radom);
  }
  function doLogin(){
    if(!doCheck()){
      $(".alert").removeClass("hide");
      $(".alert").fadeIn(1500);
      $(".alert").fadeOut(5000);
      return;
    }
    window.location.href = "/index";
  }

  function doCheck(){
    if($("#user_name").val()==""){
      $(".alert span").text("请输入用户名！");
      return false;
    }
    if($("#password").val()==""){
      $(".alert span").text("请输入密码！");
      return false;
    }
    if($("#code").val()==""){
      $(".alert span").text("请输入验证码！");
      return false;
    }
    var chkResult = doCheckCode();
    if(chkResult.code==0){
      $(".alert span").text(chkResult.info);
      return false;
    }

    var chkUser = doCheckUser();
    if(chkUser.code==0){
      $(".alert span").text(chkUser.info);
      return false;
    }
    return true;
  }

  function doCheckCode(){
    var code = $("#code").val();
    var result = new Object();
    $.ajax({
      url:"/checkCode",
      data:{"code":code},
      type:"get",
      dataType:"json",
      async:false,
      success:function(data){
        result = data;
      }
    });
    return result;
  }

  function doCheckUser(){
    var code = $("#code").val();
    var userName = $("#user_name").val();
    var password = $("#password").val();
    var result = new Object();
    $.ajax({
      url:"/checkUser",
      data:{"userName":userName,"password":password,"code":code},
      type:"post",
      dataType:"json",
      async:false,
      success:function(data){
        result = data;
      }
    });
    return result;
  }
</script>